<template>
  <div id="main">
    <v-header/>
    <el-container>
      <el-aside width="241px" style="background-color: #f8f8f8">
        <v-menu/>
      </el-aside>
      <el-main style="background-color: #f8f8f8">
        <transition name="router-fade" mode="out-in">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
        </transition>
        <transition name="router-fade" mode="out-in">
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </transition>
      </el-main>
    </el-container>

    <!--<v-footer/>-->
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import VHeader from 'base/Header.vue'
import VFooter from 'base/Footer.vue'
import VMenu from 'base/Menu.vue'
import storage from 'assets/js/storage'


  // let loadConfig=async function(cb:any) {

  //   let { data } = await findDataByCategory({})
  //   if (data.success) {
  //     console.log("ddd")
  //   cb&&cb(data.data)
  //   }
  // }
@Component({
  name: 'app',
  components: {
    VHeader,
    VFooter,
    VMenu
  }
})
export default class Main extends Vue {

  // beforeRouteEnter(to: any, from: any, next: any) {
  //   loadConfig((config:any)=>{
  //   next((vm:any)=>{
  //       storage.setConfig(config) 
  //   })
  //   });
  // }
 }
</script>

<style lang="stylus" scoped>
#main
  min-height 100%
  position relative
</style>
